<template>
  <div>
    <!-- <headers></headers> -->
    <div class="abc" style="
        width: 100%;
        height: 450px;

      ">
      <el-row>
        <el-col :span="10">
          <img src="https://znunwm.top/stu/assets/img/banner/b-shape1.png" style="width: 100%; height: 440px" />
          <div style="position: absolute; top: 180px; left: 180px; width: 500px">
            <div class="title">旗下站点</div>
            <div class="zi">首页->旗下站点</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="conn">
      <div class="title">旗下站点</div>
      <div class="zi" style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 35px;
        ">
        <div>
          这里分享我的经验、见解和灵感，希望我的分享能为你带来新的知识和启发
        </div>
        <el-button type="primary"><a href="#targter">联系作者</a></el-button>
      </div>

      <el-row :gutter="25">
        <el-col :span="6" v-for="item in list" :key="item.url" style="margin-bottom: 30px">
          <el-card shadow="hover" style="border-radius: 10px; height: 320px">
            <div style="
                display: flex;
                align-items: flex-start;
                justify-content: center;
                padding-top: 20px;
              ">
              <img :src="item.prc" style="width: 220px; height: 140px; margin: auto" @click="
                  (dialogVisible = item.url === ''||item.url===null ? true : false),
                    (name = item.name)
                " />
            </div>
            <div style="text-align: center; font-size: 18px; margin-bottom: 10px" class="zi">
              {{ item.name }}
            </div>
            <div class="zi" style="
                font-size: 12px;
                height: 40px;
                letter-spacing: 1px;
                overflow: hidden;
              ">
              简介：{{ item.introduce }}
            </div>
            <div style="display: flex; align-items: center; margin-top: 0px" v-if="item.url!==''&&item.url!==null&&item.url!==underfine">
              <div @click="open(item.url)" style="cursor: pointer">
                立即前往
              </div>
              <i class="el-icon-arrow-right"></i>
            </div>

            <el-dialog title="前往体验" :visible.sync="dialogVisible" width="22%" :before-close="handleClose">
              <img src="../assets/xia.png" style="
                  widows: 210px;
                  height: 200px;
                  margin-left: 45px;
                  max-width: 100%;
                  max-height: 100%;
                " v-if="name === '煋玥阁'" />
              <img src="../assets/xia2.jpg" style="
                  widows: 210px;
                  height: 200px;
                  margin-left: 45px;
                  max-width: 100%;
                  max-height: 100%;
                " v-if="name !== '煋玥阁'" />
            </el-dialog>
            <!-- 
            <div v-if="dang === item.name && dialogVisible" style="position: absolute;top: 0;">
              <img src="../assets/xia.png" style="widows: 200px;height: 200px;">
            </div> -->
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div id="targter" style="margin-top: 200px"></div>
    <footers></footers>
  </div>
</template>

<script>
import headers from "../components/nav.vue";
import footers from "../components/footers.vue";
export default {
  data() {
    return {
      list: [
        // {
        //     prc: 'https://img-blog.csdnimg.cn/direct/5520ee43ba074f06b991a00d2b94e4ef.png#pic_center',
        //     url: '',
        //     name: '煋玥阁',
        //     introduce: '融合了相册，账单，动态，文章 于一体的微信小程序',
        // },

        // {
        //     prc: 'https://img-blog.csdnimg.cn/direct/ad110e480ce9447ca0fc76e0c6b975a3.png',
        //     url: 'http://101.34.68.175/atlas/#/',
        //     name: '中药图谱',
        //     introduce: '对中药信息，关系的介绍',
        // },
        // {
        //     prc: 'https://img-blog.csdnimg.cn/direct/65ccdad44e614a1dbfb589c8e6f1a151.png',
        //     url: 'http://101.34.68.175/blog/#/',
        //     name: '煋玥博客',
        //     introduce: '发布文章、图片等内容的博客网站',
        // },
        // {
        //     prc: 'https://img-blog.csdnimg.cn/direct/9e600781d1fc4f848edfdcab5047b19d.png#pic_center',
        //     url: 'http://101.34.68.175/culture/#/',
        //     name: '拾遗',
        //     introduce: '帮助公众了解非遗的内涵和价值',
        // },
        // {
        //   prc: "https://img-blog.csdnimg.cn/direct/4d5f9cd46c9643de97e43145c2e74471.png#pic_center",
        //   url: "",
        //   name: "煋玥工具箱",
        //   introduce: "提供多种图片，文字处理工具",
        // },
        // {
        //   prc: "https://img-blog.csdnimg.cn/direct/9e600781d1fc4f848edfdcab5047b19d.png#pic_center",
        //   url: "http://101.34.68.175/guan/#/",
        //   name: "作者首页",
        //   introduce: "帮助公众了解非遗的内涵和价值",
        // },
        {
          prc: "https://img-blog.csdnimg.cn/direct/0d6681c5927240d9a521eb5aca0a2839.png#pic_center",
          url: "https://gitee.com/zhang-hai-fei",
          name: "gitee",
          introduce: "作者代码库",
        },
        {
          prc: "https://img-blog.csdnimg.cn/direct/f260cf552ae24e4ca07c48d7f1d3e64c.png#pic_center",
          url: "https://mp.csdn.net/mp_blog/manage/article?spm=1000.2115.3001.5448",
          name: "csdn",
          introduce: "csdn文章",
        },
      ],
      dialogVisible: false,
      name: "",
    };
  },
  components: {
    headers,
    footers,
  },
  created() {
    this.getZhandian();
  },
  methods: {
    getZhandian() {
      this.$http.get("/zhandian/zhandian").then((res) => {
        this.list.unshift(...res.data);
        //    this.list.unshift(res.data)
      });
    },
    open(lient) {
      window.open(lient, "_blank");
    },
    view() {
      this.$router.push("zhandian");
    },
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped>
.conn {
  margin-left: 120px;
  margin-right: 120px;
}

.zi {
  margin-top: 20px;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

.title {
  margin-top: 60px;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: #231d70;
  font-size: 40px;
  letter-spacing: 5px;
  width: 87%;
  text-transform: uppercase;
  animation: move linear 2000ms infinite;
}

a {
  text-decoration: none;
}
.abc{
  background-image: url('https://img.alicdn.com/imgextra/i1/O1CN01CGnWuz24J3RV8sZDn_!!6000000007369-1-tps-2112-567.gif');
  background-size: cover;
}
</style>